@import "element";

* {
  margin: 0;
  padding: 0;
}

html, body {
  background: $body-bg;
  color: $body-color;
  font: {
    family: $body-family;
    size: $body-size;
  };
  height: 100%;
}

#app {
  height: 100%;
}

img {
  border: 0;
  vertical-align: top;
}

ul, ol, li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6, b {
  font-weight: normal;
}

i, em {
  font-style: normal;
}

a {
  text-decoration: none;
  outline: none;
  color: #303133;
}

.color-red {
  color: red;
}

//margin pading
.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.pt-12 {
  padding-top: 12px;
}

.pl-12 {
  padding-left: 12px;
}

//width
.w-auto {
  width: auto !important;
}

.col-5 {
  width: 50%;
}

.bt {
  text-align: center;

  button {
    width: 100%;
    margin-top: 12px;
    height: 32px;
  }
}

//title 样式
.content-title {
  @include flex(nowrap, space-between, center);
  background: $title-bg;
  border: 1px solid $title-bg;
  padding: 8px;
  margin-bottom: 12px;
  min-height: 32px;

  .su-title {
    font-weight: bold;
    @include flex();

    i {
      font-size: 16px;
      color: $title-icon;
      font-weight: bold;
      margin-right: 8px;
    }
  }
  //有导入按钮css
  .batch-but-css{
    @include flex();
    button{
      margin: 0 5px;
    }
  }
}

//tabs 样式
.common-tabs {
  position: relative;

  &-right {
    position: absolute;
    top: 0;
    right: 0;
    @include flex();

    &-search {
      margin-left: 8px;
    }
  }
}

//tabs form样式
.common-tabs-from {
  @include flex(wrap);
  border-bottom: 1px solid #e6e9f0;
  margin-bottom: 15px;

  &-but {
    justify-content: center !important;
  }

  li {
    @include flex();
    flex: 0 0 auto;
    width: 450px;
    margin: 0 12px 12px 0;
    overflow: hidden;

    > span {
      flex: 0 0 auto;
      min-width: 90px;
      max-width: 160px;
      font-size: 14px;
      color: #030819;
      text-align: right;
      margin-right: 8px;
    }

    //单选框和多选框
    .el-radio {
      margin-top: 5px;
      margin-right: 12px;
    }

    .el-checkbox {
      margin: 2px 12px 2px 0;
    }

    .el-radio__label, .el-checkbox__label {
      padding-left: 3px;
    }

    //下拉框
    .el-select, .el-cascader, .el-date-editor {
      width: 100%;
    }
  }
}

//配置字段dialog
.toConfigure-field-dialog {
  &-content {
    @include flex(nowrap, flex-start, flex-start);

    .left {
      flex: 0 0 auto;
      width: 730px;
      position: relative;
      height: 60vh;
      margin: 15px 0 0 15px;


      .parent {
        overflow: hidden;
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0
      }

      .content {
        padding-bottom: 15px;

        dt {
          font-size: 16px;
          color: #222e52;
          padding-bottom: 12px;
        }

        dd {
          @include flex(wrap);
        }

        dd label {
          width: 120px;
          margin: 0 12px 15px 0;
          @include flex();
        }

        dd .el-checkbox__label {
          padding-left: 5px;
          color: #606266;
        }

        .tooltip {
          width: 110px;
          padding-bottom: 3px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .right {
      flex: 1;
      position: relative;
      height: 60vh;
      margin: 0 15px;
      border-left: 1px solid #e6e9f0;
      padding-bottom: 15px;

      .parent {
        overflow: hidden;
        position: absolute;
        top: 55px;
        bottom: 0;
        left: 0;
        right: 0
      }

      .tableParent {
        top: 110px;
      }

      .title {
        font-size: 16px;
        color: #222e52;
        border-bottom: 1px solid #e6e9f0;
        padding: 12px;
      }

      //冻结
      .frozen {
        border-bottom: 1px solid #e6e9f0;
        padding: 12px 0;
        @include flex();

        span {
          flex: 0 0 auto;
          width: 50px;
          text-align: right;
          margin-right: 8px;
        }
      }

      .frozenSelect {
        width: 60px;
        margin: 0 8px;
        .el-input--suffix .el-input__inner{
          padding-right: 0;
          padding-left: 8px;
        }
      }

      .content {
        li {
          padding: 0 12px 12px;
          @include flex(nowrap, space-between);

          span {
            flex: 1;
            padding-left: 12px;
            text-align: left;
          }

          .el-icon-close {
            cursor: pointer;
          }
        }
      }
    }

    .child {
      float: left;
      overflow: auto;
      width: 100%;
      height: 100%;
    }
  }

  .el-dialog__body {
    padding: 0 !important;
  }

  .el-dialog__footer {
    margin: 0 !important;
    padding: 0 !important;
  }

  &-footer {
    padding: 15px;
    border-top: 1px solid #e6e9f0;
  }
}

//table 表头前面的按钮
.common-table-title-but {
  text-align: right;

  .el-button {
    margin-bottom: 15px;
  }

}

//分页样式
.common-pagination {
  position: fixed;
  bottom: 15px;
  width: calc(100% - 40px - 220px);
  text-align: right;
}


//抽屉样式
.common-drawer {
  border-radius: 12px 0 0 12px;

  .el-drawer__body {
    padding-left: 0 !important;
  }

  &-content {
    position: relative;
    height: 100%;

    .time {
      text-align: right;
      font-size: 12px;
      color: #5c647a;
      line-height: 20px;
    }

    .parent {
      overflow: hidden;
      position: absolute; //position: relative;height: 100vh父元素是这个就要设置高度 position: absolute; 根据自己的需求改
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .leftChild {
      float: left;
      overflow: auto;
      width: 144px;
      margin-right: 24px;
      margin-left: 20px;
      height: 100%;
      scrollbar-width: none;
      -ms-overflow-style: none;

      .content {
        li {
          padding-right: 16px;
          border-right: 1px solid #e1e6eb;
          font-size: 14px;
          color: #515a6e;
          line-height: 32px;
          text-align: right;
          cursor: pointer;
        }

        .active {
          border-right: 2px solid #3385ff;
          font-weight: 600;
          color: #3385ff;
        }
      }
    }

    .rightChild {
      float: left;
      overflow: auto;
      width: calc(100% - 188px);
      height: 100%;
      //background: #000000;
      scrollbar-width: none;
      -ms-overflow-style: none;

      .content {
        overflow-y: scroll;

        &-main {
          //margin-bottom: 20px;
          padding-bottom: 30px;
          //标题
          .title {
            @include flex();

            span {
              width: 3px;
              height: 14px;
              background-color: #2962ff;
              margin-right: 8px;
            }

            label {
              font-size: 14px;
              color: #17233d;
              font-weight: 600;
              line-height: 20px;
              padding-right: 24px;
            }

            .s {
              flex: 1;
              height: 1px;
              border-bottom: 1px solid #dedede;

            }

            .n {
              cursor: pointer;
              font-size: 14px;
              color: #17233d;
              margin-left: 50px;

              i {
                color: #3385ff;
                font-size: 18px;
              }
            }
          }

          //查看
          .see {
          }
        }
      }

      .content::-webkit-scrollbar {
        display: none;
        width: 0;
      }
    }

    .leftChild::-webkit-scrollbar {
      display: none;
      width: 0;
    }

    .rightChild::-webkit-scrollbar {
      display: none;
      width: 0;
    }
  }

}

//抽屉查看样式
.common-drawer-see {
  margin-top: 8px;
  @include flex(wrap);

  &-li {
    flex: 0 0 auto;
    width: 370px;
    margin: 10px 11px;
    @include flex();
    font-size: 14px;
    color: #081333;

    &-title {
      flex: 0 0 auto;
      min-width: 120px;
      max-width: 140px;
      margin-right: 10px;
    }

    //时间 至
    .time-to {
      display: inline-block;
      margin: 0 12px 0 8px;
    }

    //时间 相差
    .time-to2 {
      display: inline-block;
      margin-left: 12px;
    }

    //文件上传
    .table-upload-file-box {
      ul {
        @include flex(wrap);

        li {
          margin-right: 12px;
        }

        span, i {
          font-size: 16px !important;
        }
      }
    }
  }

  //占满一行
  .li2 {
    width: calc(100% - 33px);
  }
}

.common-drawer-edit {
  margin-top: 8px;
  @include flex(wrap);
  //.el-form-item{
  //  width: 370px;
  //}
  &-li {
    flex: 0 0 auto;
    width: 370px;
    margin: 10px 11px !important;
    @include flex();
    font-size: 14px;
    color: #393939;

    .el-form-item__label {
      flex: 0 0 auto;
      width: 120px;
      text-align: right;
      color: #393939;
    }

    .el-form-item__content {
      flex: 1
    }

    //单选框和多选框
    .el-radio {
      margin-right: 8px;
    }

    .el-checkbox {
      margin: 2px 10px 2px 0;
    }

    .el-radio__label, .el-checkbox__label {
      padding-left: 3px;
    }

    //下拉框
    .el-select, .el-cascader, .el-date-editor {
      width: 100%;
    }

    .table-upload-file-box {
      ul {
        @include flex(wrap);

        li {
          margin-right: 12px;
        }

        span, i {
          font-size: 16px !important;
        }
      }
    }
  }

  //占满一行
  .li2 {
    width: calc(100% - 33px);
  }

  //保存取消按钮
  &-but {
    width: calc(100% - 33px);
    padding-top: 10px;
    text-align: center;
    margin-bottom: 0px !important;

    .el-button + .el-button {
      margin-left: 20px;
    }
  }
}

//抽屉点击新增 里面的保存按钮
.common-drawer-title-add-edit {
  position: fixed;
  bottom: 10px;
  border-top: 1px solid #dedede;
  width: 1050px;
  text-align: center;
  padding-top: 10px;
  background: #fff;
  z-index: 9999;

  .el-button + .el-button {
    margin-left: 20px;
  }
}

//抽屉头部CSS
.common-drawer-title-sys {
  @include flex();
  margin-bottom: 15px;

  span {
    width: 3px;
    height: 14px;
    background-color: #2962ff;
    margin-right: 8px;
  }

  label {
    font-size: 14px;
    color: #17233d;
    font-weight: 600;
    line-height: 20px;
    padding-right: 24px;
  }

  .s {
    flex: 1;
    height: 1px;
    border-bottom: 1px solid #dedede;
  }
}

//颜色
.color1 {
  color: #6d6d6d;
}

.cc-table-style {
  .el-button {
    margin: 4px;
  }
}

//公用dialog css
.public-dialog-css {
  .el-date-editor--monthrange.el-input, .el-date-editor--monthrange.el-input__inner {
    width: 100% !important;
  }
  .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{
    width: 100% !important;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 100% !important;
  }
  .el-select{
    width: 100% !important;
  }
  .el-dialog__footer{
    border-top: 1px solid #dedede;
  }
}

//table 有抽屉的布局
